<template>
	<view>
		<view class="flex align-center justify-center">
			<!-- #ifdef MP-WEIXIN -->
			<button class="avatar-button" openType="chooseAvatar" @chooseavatar="onChooseAvatar">
				<u-avatar :src="formatLink(value)" mode="aspectFill" size="50"></u-avatar>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view @click="uploadAct">
				<view class="avatar-button" v-if="value">
					<u-avatar :src="formatLink(value)" mode="aspectFill" size="50"></u-avatar>
				</view>
				<view class="upload-block" v-else>
					<u-icon name="plus" color="#CCC" size="24"></u-icon>
				</view>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		uploadImg,
	} from '@/api/common.js';
	export default {
		components: {

		},
		props: {
			value: {
				type: String,
				default: '',
			}
		},
		data() {
			return {

			}
		},

		created() {

		},
		methods: {
			onChooseAvatar(e) {
				uni.showLoading({
					title: this.$t('uploading'),
					mask: true
				});
				this.upload(e.detail.avatarUrl)
			},
			uploadAct() { //上传图片
				// #ifdef MP-WEIXIN
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					success(res) {
						const tempFilePaths = res.tempFiles[0].tempFilePath;
						uni.showLoading({
							title:this.$t('uploading'),
							mask: true
						});
						this.upload(tempFilePaths)
					}
				})
				// #endif
				//#ifndef MP-WEIXIN
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						uni.showLoading({
							title: this.$t('uploading'),
							mask: true
						});
						this.upload(tempFilePaths)
					}
				});
				// #endif
			},
			upload(imgUrl) {
				uploadImg(imgUrl).then(res => {
					this.$emit('input', res);
					uni.hideLoading();
				}).catch(res => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.avatar-button {
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		&::after{
			border: none;
		}
	}
	.upload-block{
		box-sizing: border-box;
		height: 100rpx;
		width: 100rpx;
		border-radius: 8rpx;
		border:2rpx dashed #CCC;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>